<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .select {
      background-color: #56a5f1;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <p>模拟百度搜索</p>
    <input
      type="text"
      v-model="msg"
      @keyup.down="select"
      @keyup.enter="jump"
    >
    <ul>
      <!-- index是选项的索引，active是当前选择的项，当他们相等时，这个选项就被选中了 -->
      <!-- 新的需求：只展示前5条数据 -->
      <li
        v-for="(item, index) in newList"
        :key="index"
        :class="{select: index===active}"
      >
        {{item}}
      </li>
    </ul>
    <!-- 跨域：域名、协议、端口号必须完全一致，否则就是跨域。浏览器的同源策略 -->
    <!-- 解决跨域问题：jsonP，动态增加script标签，src对应的地址，可以是其他网站的资源。img、link也可以用其他网站的资源 -->
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '',
        // 接受搜索的结果列表
        list: [],
        // 当前选择的索引
        active: 0
      },
      computed: {
        // 新的需求：只展示前5条数据
        // 通过计算属性，得出最终的结果，然后渲染。这种方式比反复执行v-if性能更好
        newList() {
          // filter方法返回一个符合条件的新数组，return后面是筛选条件
          let arr = this.list.filter((item, index) => {
            return index < 5
          })
          return arr
        }
      },
      watch: {
        msg(val) {
          console.log(val);
          // jsonP，动态增加script标签
          // 创建标签
          let script = document.createElement('script');
          // 修改src属性
          script.src = 'http://suggestion.baidu.com/su?cb=aa&wd='+val;
          // 添加到文档中
          document.body.appendChild(script)
        }
      },
      methods: {
        // 选择对应的选项
        select() {
          if(this.active < 9) {
            this.active ++;
          }else {
            this.active = 0;
          }
        },
        // 跳转页面
        jump() {
          let str = this.list[this.active];
          window.open('https://www.baidu.com/s?wd='+str)
        }
      },
    })
    // 搜索接口的回调函数
    function aa(res) {
      console.log(res.s);
      // 给vue中的list赋值
      vm.list = res.s;
    }
  </script>
</body>
</html>